import React, { Component } from "react";
import style from "./index.module.scss";
import {back_icon} from '../../../common/icon/svg'
import {connect} from "react-redux"
import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
const img  = require("../image/gt.png").default
const location  = require("../image/location.png").default
function failToast() {
    Toast.fail('填写收货地址或选择支付方式', 1);
}
class Close extends Component {
    constructor(props) {
        super(props);
        this.state = {
            userInfo: null,
            active:0,
            flag:false,
            typeList:[
                {
                    name:"请选择支付方式",
                    img:require("../image/type.png")
                },
                {
                    name:"支付宝支付",
                    img:require("../image/type01.png")
                },
                {
                    name:"微信支付",
                    img:require("../image/type02.png")
                },
                {
                    name:"银联支付",
                    img:require("../image/type03.png")
                },
                {
                    name:"钱包支付",
                    img:require("../image/type04.png")
                }
            ],
            address:JSON.parse(localStorage.getItem("address"))
        }
    }

     loadingToast=(allMoney)=>{
        Toast.loading('Loading...', 1, () => {
          this.props.history.push({pathname:"/pay",state:{item:this.state.typeList[this.state.active],active:this.state.active,money:allMoney}},)
        });
      }
    componentDidMount() {
        // dbConnTest(res=>{
        //     console.log(res);
        // });

    }
    //选择支付方式
    btn=()=>{
        let {flag} =this.state
        this.setState({
            flag:!flag
        })
    }
    typeBtn(i){
        this.setState({
            active:i,
            flag:false
        })
    }
    render() {
        let arr = this.props.carList.filter(item=>{
            return item.ischeck
        })
        let n=0
        let allMoney=0
        arr.forEach(item=>{
            n+=item.num
            allMoney+=item.num*item.price
        })
        
        let userList = JSON.parse(localStorage.getItem("userList"))
        let {head_url,nickname,signature,stuAuth} = userList
        return (
            <div className={style["index-root"]}>
                    <div className={style.head}>
                        <span onClick={()=>this.props.history.push("/shopcart")}>{back_icon}</span>
                        <span className={style.shou}>确认下单</span>
                    </div>
                    {  this.state.address?<div className={style["address-active"]}>
                            <img src={location}></img>
                            <div className={style["address-center"]}>
                                <div className={style["address-top"]}>
                                    <div>
                                        <span className={style["address-name"]}>{this.state.address.name}</span>
                                        <span className={style["address-ipone"]}>{this.state.address.ipone}</span>
                                    </div>
                                    <span className={style["address-stuauth"]}>{stuAuth?"学生认证":null}</span>
                                </div>
                                <div className={style["address-bottom"]}>
                                    <span  className={style["address-city"]}>{this.state.address.city}</span>
                                    <span className={style["address-detailed"]}>{this.state.address.detailed}</span>
                                </div>
                            </div>
                            <span className={style.edit} onClick={()=>this.props.history.push("/address")}>修改地址</span>
                    </div>:
                        <div className={style.address} onClick={()=>this.props.history.push("/address")}>
                            <img src={location}></img>
                            <span className={style.add}>请添加收货地址</span>
                            <img src={img}></img>
                        </div>
                    }
                    <div className={style.order}>
                        <div className={style.user}>
                            <img src={"/apis/"+head_url}></img>
                            <div className={style["user-msg"]}>
                                <p className={style.nickname}>{nickname}</p>
                                <p className={style.signature}>{signature}</p>
                            </div>
                        </div>
                        {
                            arr.map((item,i)=>{
                                return (
                                    <div key={i} className={style["order-list"]}>
                                        <img src={"/apis/"+item.cover}></img>
                                        <div className={style["order-message"]}>
                                            <h3>{item.name}</h3>
                                            <div className={style["list-text"]}>
                                                <span className={style.grade}>{item.grade}成新</span>
                                                <span className={style.getSelf}>{item.getSelf?"支持自提":null}</span>
                                                <span className={style.addres}>{item.address.slice(0,3)}</span>
                                            </div>
                                            <div className={style["list-money"]}>
                                                <div>
                                                    <span className={style.price}>￥{item.price}</span>
                                                    <span className={style.oldprice}>￥{item["origin_price"]}</span>
                                                </div>
                                                <span className={style.num}>X{item.num}</span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                        <div className={style.distribution}>
                            <span className={style.type}>配送方式</span>
                            <div>
                                <span className={style["distribution-zi"]}>支持自提</span>
                                <span className={style["distribution-qian"]}>￥0.00</span>
                            </div>
                        </div>
                        <div className={style.xiaoji}>
                            共{n}件商品：小计￥{allMoney}
                        </div>
                    </div>
                    <div className={this.state.flag?style.none+" "+style.active:style.none}>
                        <h2>
                            支付方式
                        </h2>
                        <ul>
                            {
                                this.state.typeList.slice(1).map((item,i)=>{
                                    return (
                                        <li key={i} onClick={()=>this.typeBtn(i+1)}>
                                            <img src={item.img.default}></img>
                                            <span>{item.name}</span>
                                            <img src={img}></img>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                        
                    </div>
                    <div className={style.footer}>
                        <div className={style["footer-type"]}>
                            <span className={style["footer-zhi"]}>支付方式</span>
                            <div className={style["footer-img"]} onClick={this.btn}>
                                <span className={style["footer-active"]}>{this.state.typeList[this.state.active].name}</span>
                                <img src={this.state.typeList[this.state.active].img.default}></img>
                            </div>
                            
                        </div>
                        <div className={style["footer-money"]}>
                            <p>共{n}件商品</p>
                            <div>
                                <span className={style.he}>合计：</span>
                                <span className={style.all}>￥{allMoney}</span>
                            </div>
                            {
                                this.state.active&&this.state.address?
                                <>
                                    <Button onClick={()=>this.loadingToast(allMoney)} className={style["go-active"]}>去结算</Button>
                                </>
                                :<>
                                        <Button onClick={failToast} className={style["am-button"]}>
                                                去结算
                                        </Button>
                                </>
                                
                            }
                            
                        </div>
                    </div>
            </div>
        )
    }
}
const mapStateToProps = (state)=>{
    return {carList:state.carList};
}
const mapDispatchToProps= (dispatch)=>{
    return {
        allCheck:user=>{
            dispatch({type:"ALLCHECK",data:user})
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(Close);